<script setup lang="ts">
import {Search,ShoppingCart} from "@element-plus/icons-vue";
import { ref } from 'vue'
const searchText = ref('')
</script>

<template>
  <header>
    <div class="headerMain">
      <router-link to="/"><img class="logo" src="../../assets/home/logo.png" alt="小鹿线" title="小鹿线"  /></router-link>
      <ul class="link">
        <router-link to="/">
          <li title="首页" :class="{active: $route.path==='/'}">
          首页</li></router-link>
        <router-link to="/course">
          <li title="课程" :class="{active: $route.path==='/course'}">课程</li>
        </router-link>
        <router-link to="/">
          <li title="会员" :class="{active: $route.path==='/huiyuan'}">会员</li>
        </router-link>
      </ul>
      <div  class="search" >
        <input v-model="searchText" placeholder="搜索想要的课程"/>
        <router-link to="/search">
          <el-icon><Search /></el-icon>
        </router-link>
      </div>
      <div class="login">
        <div class="cart">
          <router-link to="/cart">
            <el-icon><ShoppingCart /></el-icon>
          </router-link>
        </div>
        <router-link to="/login" class="loginLink">注册/登录</router-link>
<!--        <router-link to="/mycourse" class="kecheng">我的课程</router-link>-->
<!--        <div class="account">-->
<!--          <img src="../assets/home/Avat62.png"  title="用户头像" alt="用户头像" />-->
<!--        </div>-->
      </div>
    </div>
  </header>
</template>

<style scoped lang="scss">
header{
  width: 100%;
  height: 100px;
  .headerMain{
    width: 1000px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo{
      width: 127px;
      height: 50px;
    }
    .link{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width:300px;
      li{
        width: 80px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        color: #808080;
        &.active{
          color: #388FFF;
          flex-direction: column;
          justify-content: center;
          position: relative;
          font-weight: 600;
          a {
            display: inline-block;
            align-self: center;
          }
          &:after {
            content: '';
            width: 60px;
            height: 3px;
            background: #388FFF;
            position: absolute;
            bottom: 0;
          }
        }
      }
    }
    .search{
      width:280px;
      height:40px;
      background: #F0F2F4;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      padding: 0 10px;
      box-sizing: border-box;
      input{
        border: none;
        width: 230px;
        height: 100%;
        background: none;
      }
      .el-icon{
        width: 24px;
       svg{
         width: 24px;
         height: 24px;
       }
      }
    }
    .login{
      width:120px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .cart{
        a{
          display: inline-block;
        }
        .el-icon{
          width: 24px;
          svg{
            width: 24px;
            height: 24px;
          }
        }
      }
      .kecheng{

      }
      .account{
        width: 60px;
      }
      .loginLink{
        color: #808080;
      }
    }
  }
}
</style>